<template>
  <div id="app" class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="col-md-12">
        <form id="examineResultForm" method="post" class="form m-t" @submit.prevent="save()" accept-charset="UTF-8">
          <input type="hidden" name="id" v-model="item.id"/>
          <input type="hidden" name="token" v-model="item.token"/>
          <input type="hidden" name="newFlag" v-model="newFlag"/>
          <div class="clearfix "></div>
          <div class="table-responsive table-scrollable">
            <table class="table table-bordered table-striped  table-hover">
              <thead>
              <tr v-if="item.target">
                <th style="text-align: center" align="center" colspan="8">{{item.target.name}}</th>
              </tr>
              <tr>
                <th style="width:20px;">#</th>
                <th>评分类别</th>
                <th>考核指标类别</th>
                <th>考核指标名称</th>
                <th>考核内容</th>
                <th>考核打分细则</th>
                <th>标准分</th>
                <th>自评分</th>
              </tr>
              </thead>
              <tbody>
              <tr v-if="item.targetDetails && item.targetDetails.length>0" v-for="(data, index) in item.targetDetails">
                <td>{{index+1}}</td>
                <td>{{data.scoreType == 1 ? '自动评分' : '人工评分'}}</td>
                <td>{{data.examineType}}</td>
                <td>{{data.name}}</td>
                <td>{{data.content}}</td>
                <td>{{data.gradeDetail}}</td>
                <td>{{data.normScore}}</td>
                <td>
                  <template v-if="item.resultDetails && item.resultDetails.length>0"
                            v-for="(resultDetail, index) in item.resultDetails">
                    <div class="form-group clearfix" v-if="resultDetail.targetDetailId == data.id">
                      <input name="scoreType" :value="data.scoreType" class="form-control" type="hidden">
                      <input name="resultDetailId" :value="resultDetail.id" class="form-control" type="hidden">
                      <input :id="'bean-score'+resultDetail.id" name="score" v-model="item.resultDetails[index].score"
                             class="input-group-sm" type="number" :onchange="countSelfScore()"
                             placeholder="请输入自评分" required="" aria-required="true"
                             :aria-describedby="'bean-score-error'+resultDetail.id"
                             maxlength="32" aria-invalid="true" :range="'[0,'+data.normScore+']'"
                             :readonly="item.selfTime != null">
                      <span :id="'bean-score-error'+resultDetail.id" class="help-block m-b-none"
                            :for="'bean-score'+resultDetail.id"></span>
                    </div>
                  </template>
                </td>
              </tr>
              <tr v-if="item.targetDetails==null || item.targetDetails.length==0">
                <td colspan="8">
                  <div class="alert"><strong>{{ result | message }}</strong></div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-2 control-label text-right">自评总分：</label>
            <div class="col-md-4">
              <input id="bean-selfScore" name="selfScore" v-model="item.selfScore" class="form-control" type="number"
                     placeholder="自动计算自评总分" required="" aria-required="true" aria-describedby="bean-selfScore-error"
                     aria-invalid="true" readonly>
              <span id="bean-selfScore-error" class="help-block m-b-none" for="bean-selfScore">自评总分=(各项人工自评分/各项标准分)*100*权重+(各项系统自动评分/各项标准分)*100*权重，自评分只能评一次</span>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-2 control-label text-right">*提交资料：</label>
            <div class="col-md-8">
              <span class="help-block m-b-none inline">
                  <a href="javascript:;" id="upload_btn_files"
                     class="btn btn-success btn-sm"><i class="fa fa-upload fa-coordinate"></i> 点击上传</a>
                </span>
              <div id="upload_div_files" style="">
                <div class="file-grid-2">
                </div>
                <div :id="attach.id" class="file-grid-2 file-grid-3 inline" v-for="(attach, index) in item.attachs">
                  <input name="filePath" :value="attach.path" type="hidden">
                  <input name="factFileName" :value="attach.name" type="hidden">
                  <a :href="attach.path" target="_blank">{{attach.name}}</a>
                  <div><a href="javascript:;" onclick="removeFile(this);">删除</a></div>
                </div>
              </div>
              <span id="bean-attach-error" class="help-block m-b-none" for="bean-attach"></span>
            </div>
          </div>
          <div class="clearfix "></div>
          <div class="col-12 text-center" style="height: 50px;">
            <div>
              <input class="btn btn-primary" type="submit" value="保存"
                     :disabled="item.targetDetails==null || item.targetDetails.length==0"/> | <a
              @click="lbox.closeMyBoxLayer()"
              href="javascript:">返回</a>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import '@/assets/css/style.css'

  import $ from '@/assets/js/jquery-vendor.js'
  import 'jquery.cookie'
  import axios from 'axios'
  import '@/assets/js/validate/validation-vendor.js'
  import {apiUtil, axiosContentType, site} from '@/assets/js/boss'
  import '@/assets/js/upload_multi_file.js'

  export default {
    data() {
      return {
        item: {},
        newFlag: 0,
        uuidToken: ''
      }
    },
    mounted() {
      let that = window.$vueApp = this;
      document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
      $('#examineResultForm').validate();
      that.staff.init(function () {
        that.newFlag = sessionStorage.getItem(site.examineEvaluate.info);
        if (that.newFlag) that.uuidToken = apiUtil.guid();
        if (apiUtil.existSessionKey(site.examineEvaluate.info)) {
          that.info();
        }
      });
      window.upload_multi_file('upload_btn_files', 'upload_div_files', 'png,jpg,gif,bmp,doc,docx,xls,xlsx,pdf,pdfx,ppt,pptx', 'filePath');
    },
    methods: {
      info() {
        let that = this;
        let params = '?evaluateId=' + sessionStorage.getItem(site.examineEvaluate.info);
        axios.get(site.examineResult.getResults + params, {}).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.item = result.data;
            // console.log(JSON.stringify(result.data));
          } else {
            alert(result.message);
          }
        });
      },
      save() {
        let that = this;
        if ($('#examineResultForm').valid()) {
          let attachs = [];
          $('input[name=filePath]').each(function () {
            let file = {};
            file['name'] = $(this).parent().find('input[name=factFileName]').val();
            file['path'] = $(this).val();
            attachs.push(file);
          });
          if (attachs.length === 0) {
            alert('请上传资料!');
            return;
          }
          that.item.attachs = null;
          that.item.attachs = attachs;
          // 组装请求参数
          axios.post(site.examineResult.save, JSON.stringify(that.item),
            axiosContentType.json).then(function (response) {
            const result = response.data;
            // console.info("获取数据.." + JSON.stringify(result));
            if (result.code === 0) {
              parent.$vueApp.page();
              alert('保存成功!');
              that.lbox.closeMyBoxLayer()
            } else {
              alert(result.message);
            }
          });
        }
      },
      countSelfScore() { // 自评分自动计算总分
        // console.log('开始计算总分countSelfScore');
        let that = this;
        let totalScore = 0;
        let factitiousNormScore = 0;// 人工标准评分总和
        let factitiousScore = 0;// 人工自评分总和
        let factitiousScale = Number(that.item.target.factitiousScale);// 人工评分占比
        let autoNormScore = 0;// 系统标准评分总和
        let autoScore = 0;// 系统自评分总和
        let autoScale = Number(that.item.target.autoScale); // 系统评分占比
        for (let i in that.item.resultDetails) {
          for (let j in that.item.targetDetails) {
            if (that.item.targetDetails[j].id === that.item.resultDetails[i].targetDetailId) {
              if (that.item.targetDetails[j].scoreType === 1) {
                autoNormScore += Number(that.item.targetDetails[j].normScore);
                autoScore += Number(that.item.resultDetails[i].score); // 自评分
              } else {
                factitiousNormScore += Number(that.item.targetDetails[j].normScore);
                factitiousScore += Number(that.item.resultDetails[i].score); // 自评分
              }
            }
          }
        }
        totalScore = (Number(factitiousScore) / Number(factitiousNormScore)) * Number(factitiousScale) + (Number(autoScore) / Number(autoNormScore)) * Number(autoScale);
        that.item.selfScore = totalScore.toFixed(2);
      }
    }
  }
</script>

